<!DOCTYPE html>
<!--[if lte IE 9]><html class="lt-ie10 lt-ie9" xmlns="http://www.w3.org/1999/xhtml"> <![endif]-->
<!--[if gt IE 9]><!-->
<html xmlns="http://www.w3.org/1999/html"><!--<![endif]-->
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>欢迎来到赛尔（赛er）——注册</title>
    <meta name="keywords" content="赛尔（赛er）是一个面向全国各大高校大学生的一站式社区平台，集竞赛活动发布和讨论为一体，提供发布、查询、组队、经验分享等多元化服务。" />
    <meta name="description"
          content="平台聚合了国内各大高校的校内比赛以及国内外各领域最优质的赛事活动信息。赛事内容囊括创新创业、演讲辩论、财会金融、艺术设计、学科竞赛、公益志愿等众多领域。赛尔（赛er）致力于打造一个融合大学生学习、赛事、活动、保研、考研等为一体的成长交流空间。" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta http-equiv="Access-Control-Allow-Origin" content="*" />
    <meta name="renderer" content="webkit">
    <link rel="stylesheet" type="text/css" href="static/css/index-4.9.6.min.css" >
    <link rel="stylesheet" type="text/css" href="static/css/top-4.9.6.2.min.css">
    <link rel="stylesheet" type="text/css" href="static/css/lgr-4.9.min.css" >

    <script src="./common/jsencrypt.min.js"></script>
    <script src="static/js/sea.js"></script>
    <script src="static/js/toastr/toastr.min.js"></script>
    <script src = "./common/common.js"></script>
    <script src="static/js/seaconfig.js"></script>
    <script src="static/js/jquery-1.10.2.min.js"></script>

</head>

<body >
<!--body-wrap-->
<div class="body-wrap" id="app" style="background-image:url(static/images/2.jpg); background-repeat:no-repeat;background-size: 100%;background-attachment: fixed;">
    <div class="body-main main-wrap v-4-2">
        <div class="layui-bg-cyan">
            <ul class="layui-nav layui-bg-cyan" style="margin: 0 auto;padding:0 12%" lay-filter="">
                <li style="display: inline-block;line-height: 60px;vertical-align: middle;position: relative;"><a href="/index.html"><img style="height: 60px;margin-right:15px;" src="/static/images/logo.png"></a></li>
                <!-- 选中 加上 layui-this -->
                <li class="layui-nav-item"><a href="/index.html">首页</a></li>
                <li class="layui-nav-item"><a href="/competition/competition.html">竞赛</a></li>
                <li class="layui-nav-item"><a href="/activity/activity.html">活动</a></li>
                <li class="layui-nav-item"><a href="/ask/ask.html">论坛</a></li>
                <li class="layui-nav-item"><a href="/article/article.html">文章</a></li>
                <li class="layui-nav-item" v-if="user!=''&&user!=null&&user!=undefined">
                    <a href="javascript:;">发布</a>
                    <dl class="layui-nav-child">
                        <!-- 二级菜单 -->
                        <dd><a href="/competition/publish_competition.html">创建竞赛</a></dd>
                        <dd><a href="/activity/publish_activity.html">发布活动</a></dd>
                        <dd><a href="/ask/publish_ask.html">发起提问</a></dd>
                        <dd><a href="/article/publish_article.html">发表文章</a></dd>
                    </dl>
                </li>
                <li style="float:right" class="layui-nav-item"><a href="/login.html">登录</a></li>
                <li style="float:right" class="layui-nav-item layui-this"><a href="/reg.html">注册</a></li>
            </ul>
        </div>
        <div class="lgr-box clearfix">
            <div class="lgr-tab-nav">
                <div class="item active">
                    注册学生帐号
                </div>
            </div>
            <form name="reg" class="fl lgr-left-con" id="perRegForm">
                <div class="common-form-line clearfix">
                    <div class="fl common-input lgr-reset-code-input">
                        <label id="name-error" class="error" for="name" v-text="usererrorinfo" v-if="userdisplay"></label>
                        <input id="name" @input="usernameInput(username)" v-model="username"  type="text"  placeholder="请输入注册手机号" data-rule-required="true" data-msg-required="请输入注册手机号或邮箱" data-rule-contact="true" data-msg-remote="手机号已被注册，请更换手机号" action-remote-url="/user/validate_regname">
                    </div>
                    <button id="numbtn" type="button"  style="width: 106px; height:45px"  class="layui-btn layui-btn-normal" @click="sendcode(username)" >获取验证码</button>
                    <span class="lgr-code-tip-wrap js_error_wrap"></span>
                </div>
                <div class="common-form-line clearfix">
                    <div class="common-input">
                        <input type="text" v-model="code" placeholder="请输入手机短信验证码" data-rule-required="true" data-msg-required="请输入手机短信验证码" onkeyup="this.value=this.value.replace(/^([0-9]{3,4}-)?[0-9]{7,8}$/)">
                    </div>
                </div>

                <div class="common-form-line">
                    <div class="common-input">
                        <input type="password" v-model="password" placeholder="请输入密码" class="js_view_pass" data-rule-required="true" data-msg-required="请输入密码" data-rule-isLegalCharacter="true" data-rule-regexPassword="true" data-msg-regexPassword="密码至少包含数字和字母" data-rule-minlength="6" data-msg-minlength="密码长度至少为6位">
                        <i class="common-icon lgr-view-pass-btn js_view_pass_btn"></i>
                    </div>
                </div>
<!--                <div class="lgr-btn-box">-->
<!--                    <input type="submit" value="下一步" class="sk-btn sk-btn-green" id="regSubBtn">-->
<!--                </div>-->
                <br>
                <div style="width: 353px; margin: 0; color: #0085C5">
                    <button type="button" style="background:#0085C5 " class="layui-btn layui-btn-fluid" @click="reg(username,password,code)">提交</button>
                </div>

                <div class="lgr-link-box">
                    注册即同意<span class="lgr-link"> <a href="./contact.html">《赛er服务协议》</a></span>
                    已有账号？<span class="lgr-link"><a href="./login.html">直接登录</a></span>
                </div>
            </form>
            <div class="fr lgr-right-con">
<!--                <div class="lgr-kindly-reminder">-->
<!--                    <h2 class="title common-after-icon v-4-9 reminder-title">你可以</h2>-->
<!--                    <ul>-->
<!--                        <li>报名竞赛，讨论区留言；</li>-->
<!--                        <li>发布/报名活动；</li>-->
<!--                        <li>提问回答、发表/打赏文章；</li>-->
<!--                    </ul>-->
<!--                </div>-->
                <div class="lgr-kindly-reminder download">

                    <ul>
                        <li>随时随地报名竞赛；</li>
                        <li>加入讨论组、结识大神；</li>
                    </ul>
                    <div class="lgr-app-download-icon-2"></div>
                </div>
            </div>
        </div>
 </div>
</div>

<div class="footer-wrap v-4-2">
    <div class="footer other">
        <div class="common-box footer-box">
            <div class="to-top-box" id="toUpBox">
                <!--<a href="javascript:;" target="_blank" class="common-icon-big to-feedback-btn" title="意见反馈"></a>-->
                </a>
                <div class="iradio-2 to-msite-btn to-msite-btn-2" title="微信公众号">
            <span class="weixin-box" style="margin-top: -42px;">
              <img src="/static/images/erweima.jpg" alt="微信公众号">
              <span class="weixin-txt">关注赛er订阅号</span>
              <img src="/static/images/kefu.jpg" alt="微信客服">
              <span class="weixin-txt">添加赛er客服</span>
              <span class="arrow arrow-right boxL-cor" style="margin-top: -70px;"></span>
            </span>
                </div>
                <a href="javascript:;" class="to-top-btn common-icon-big" id="toUp" title="返回顶部"></a>
            </div>
            <div class="fl ft-info-box">
                <div class="ft-tit" title="关于赛er">关于赛er</div>
                <ul class="ft-list">
                    <li class="item">
                        <a href="" title="了解赛er" target="_blank" rel="nofollow">了解赛er</a>
                    </li>
                    <li class="item">
                        <a href="./contact.html" title="服务协议" target="_blank" rel="nofollow">服务协议</a>
                    </li>
                    <li class="item">
                        <a href="" title="合作伙伴" target="_blank" rel="nofollow">合作伙伴</a>
                    </li>
                    <li class="item">
                        <a href="" title="加入我们" target="_blank" rel="nofollow">加入我们</a>
                    </li>
                    <li class="item">
                        <a href="" title="隐私协议" target="_blank" rel="nofollow">隐私协议</a>
                    </li>
                </ul>
            </div>
            <div class="fl ft-info-box">
                <div class="ft-tit" title="帮助中心">帮助中心</div>
                <ul class="ft-list">
                    <li class="item">
                        <a href="" title="常见问题" target="_blank" rel="nofollow">常见问题</a>
                    </li>
                    <li class="item">
                        <a href="./legal.html" title="社区规范" target="_blank" rel="nofollow">社区规范</a>
                    </li>
                    <li class="item">
                        <a href="" title="意见反馈" target="_blank" rel="nofollow">意见反馈</a>
                    </li>
                </ul>
            </div>
            <div class="fr ft-info-box" style="width: 200px;">
                <div class="ft-tit" title="在线客服">联系我们</div>
                <ul class="ft-list">
                    <li class="item">
                        赛er<span class="item-dot"></span>客服QQ：<a href="https://wpa.qq.com/msgrd?v=3&uin=412414867&site=qq&menu=yes">412414867</a>
                    </li>
                    <li class="item">
                        赛er<span class="item-dot"></span>官方QQ群：320513949
                    </li>
                </ul>
            </div>

        </div>
    </div>
    <!-- 备案 footer -->
    <div class="ft-btm">
        <div class="common-box ft-btm-box">
            <div class="btn-con">
                <span class="ft-paragraph">©<span id="nowYear"></span>赛er<span class="s-4"></span></span>
                <span><a href="https://beian.miit.gov.cn/" target="_blank" style="color: #555;">苏ICP备2021019825号</a></span>
            </div>
        </div>
    </div>
</div>
    <script src="static/js/toastr/toastr.min.js"></script>
<script>
    layui.use('element', function(){
        var element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块

        //监听导航点击
        element.on('nav(demo)', function(elem){
            //
            layer.msg(elem.text());
        });
    });
    document.onkeyup = function(e) {
        // 兼容FF和IE和Opera
        var event = e || window.event;
        var key = event.which || event.keyCode || event.charCode;
        if (key == 13) {
            app.login();
        }
    };
    var app = new Vue({
        el:"#app",
        data:{
            username:"",
            password:"",
            code:"",
            user:'',
            usererrorinfo: "",
            userdisplay: false,
            unreadCount:0
        },
        mounted(){
            this.user = JSON.parse(sessionStorage.getItem("userInfo"))
            if(this.user!=null&&this.user!=undefined&&this.user!=''){
                getUnreadCount(data=>{
                    app.unreadCount = data;
                });
            }
        },
        methods:{
            reg(username,password,code){
                if (username==null || username.length ==0){
                    this.username = "";
                    this.usererrorinfo="请输入注册手机号/邮箱";
                    this.userdisplay = true;
                    return false;
                }
                var emailreg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
                if(!(/^(1)\d{10}$/.test(username)) && !emailreg.test(username)){
                    //alert("手机号码有误，请重填");
                    this.username = "";
                    this.usererrorinfo="手机号/邮箱格式有误，请重新输入";
                    this.userdisplay = true;
                    return false;
                }
                if(app.code==""){
                    toastr.warning("请输入验证码");
                    return;
                }
                if(app.password==""){
                    toastr.warning("请输入密码");
                    return;
                }
                encodeString(app.password,password=>{
                    getDataByPost('api/user/register',{
                        username: app.username,
                        password: password,
                        code:app.code,
                    },function (res){
                        if(res.code==200){
                            toastr.success("注册成功")
                            setTimeout(function (){
                                window.location = '/login.html'
                            },1500)
                            sessionStorage.setItem("userInfo",JSON.stringify(res.data));
                            localStorage.setItem("user", JSON.stringify(res.data));
                        }else{
                            toastr.error(res.msg);
                        }
                    })
                })

            },
            usernameInput(username){
                var emailreg = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
                if(! ((/^1[3|4|5|7|8][0-9]{9}$/.test(username)) || emailreg.test(username))){
                    //this.username = "";
                    this.usererrorinfo="";
                    this.userdisplay = false;
                    //return false;
                }
            },
            sendcode(username){
                if (username==null || username.length ==0){
                    this.username = "";
                    this.usererrorinfo="请输入注册手机号/邮箱";
                    this.userdisplay = true;
                    return false;
                }
                var emailreg = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
                if( ! ((/^1[3|4|5|7|8][0-9]{9}$/.test(username)) || emailreg.test(username))){
                    //alert("手机号码有误，请重填");
                    this.username = "";
                    this.usererrorinfo="手机号/邮箱格式有误，请重新输入";
                    this.userdisplay = true;
                    return false;
                }
                var  num=60;
                var interval= setInterval(function (){
                    $("#numbtn").addClass("layui-disabled")
                    $("#numbtn").attr("disabled", true)
                    $("#numbtn").html(num--)
                    if(num==-1){
                        $("#numbtn").html("获取验证码");
                        $("#numbtn").removeClass("layui-disabled")
                        $("#numbtn").attr("disabled", false)
                        clearInterval(interval)
                    }
                },1000)
                getDataByPost('api/base/sendCode',{
                    username:app.username,
                },function (res){
                    if(res.code==200){
                        toastr.success("成功发送验证码!")
                    }else{
                        toastr.error(res.msg)
                    }
                })

            },



        }
    })
</script>
<script>
  toTopFun();
</script>
</body>
</html>